<!-- <template>
	<view id="box">
		<view id="box_font">
			<view class="photo">
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<view class="name">
				<open-data type="userNickName" class="Name"></open-data>
			</view>
		</view>
		<view id="box_bottom">
			<view class="bottom-font">
				<view class="bottom-left">
					<image src="https://img01-xusong.91q.com/33A1F29F-2867-4917-9CB1-FA0A10B5E1CD.png" mode="" style="width:100rpx; height: 100rpx;" @click="gomyhuodong()"></image>
					<a style="font-size: 30rpx; color: black;">我的活动</a>
				</view>
				<view class="bottom-right">
					<image src="https://img01-xusong.91q.com/43A0D9BE-CB70-4A27-A727-4B46127D196E.png" mode="" style="width:100rpx; height: 100rpx;" @click="gomyshetuan2()"></image>
					<a style="font-size: 30rpx; color: black;">我的社团</a>
				</view>
			</view>
			<view class="bottom-bottom">

				<u-cell-group>
					<u-cell size="large" isLink title="修改个人信息" @click="gochange()">
						<u-icon slot="icon" size="30" name="https://img01-xusong.91q.com/9D5B4295-5EA8-41D7-8944-5BFCC67C62FF.png">
						</u-icon>
					</u-cell>
					<u-cell size="large" isLink title="社长审核" @click="goExamine()">
						<u-icon slot="icon" size="40" name="https://img01-xusong.91q.com/E88E17BF-B6FC-4B14-B300-D7F3D484D009.png">
						</u-icon>
					</u-cell>
					<u-cell size="large" isLink title="我的收藏" @click="goshoucang()">
						<u-icon slot="icon" size="38" name="https://img01-xusong.91q.com/A8EB7C72-6DD2-44BE-955A-037A44BE599A.png">
						</u-icon>
					</u-cell>
					<u-cell size="large" isLink title="用户须知" @click="goUserInfo()">
						<u-icon slot="icon" size="38" name="https://img01-xusong.91q.com/BB862BBD-1463-4863-A54E-9C2315AD26E7.png">
						</u-icon>
					</u-cell>
					<u-cell size="large" isLink title="社团管理" @click="goMangement()">
						<u-icon slot="icon" size="38" name="https://img01-xusong.91q.com/66F6DA42-4E57-41E2-A143-3B227A742EEE.png">
						</u-icon>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template> -->
<template>
	<view class="allBody">
		<image src="https://img01-xusong.91q.com/C11C41F5-4D39-46FC-8B05-606D4A18D7ED.png" class="backgroundImg">
		</image>
		<view>
			<!-- 头像 -->
			<view @click="goLogin(),goMyPage()">
				<image :src="avatarUrl" class="userImg"></image>
				<view class="userName">{{userName}}</view>
			</view>
			<!-- 跳转到编辑个人信息 -->
			<view @click="gochange()">
				<view class="rewriteUserData">查看/编辑资料</view>
				<image src="../../static/right.png" class="rewriteUserDataIcon"></image>
			</view>
			<!-- 跳转到消息的更多 -->
			<image src="https://img01-xusong.91q.com/28729E5F-6411-47C5-BD9B-AFF2208FAD23.png" class="msgIcon"
				@click="goToMessageMore()"></image>
		</view>
		<!-- 跳转到我的活动 -->
		<view>
			<view class="middleBorder"></view>
			<view @click="gomyhuodong()">
				<image src="https://img01-xusong.91q.com/89A2AAEF-53A8-49AD-B218-8780915E7BE3.png" class="myActIcon">
				</image>
				<view class="myActText">我的活动</view>
			</view>
			<view class="middleLine"></view>
			<!-- 跳转到我的社团 -->
			<view @click="gomyshetuan2()">
				<image src="https://img01-xusong.91q.com/9F160B32-CA70-4E8C-A51C-07ADDBE9506F.png" class="myAsoIcon">
				</image>
				<view class="myAsoText">我的社团</view>
			</view>
		</view>
		<view>
			<view class="bottomBorder"></view>
			<view class="line1"></view>
			<view class="line2"></view>
			<view class="line3"></view>
			<view class="line4"></view>
			<view class="line5"></view>
			<!-- 跳转到社长审核 -->
			<view @click="goExamine()">
				<image src="https://img01-xusong.91q.com/B640713F-5F20-423E-9922-1F2D0B12C495.png" class="shenheIcon">
				</image>
				<view class="shenheText">社长审核</view>
				<image src="../../static/arrow-right.png" class="shenheRight"></image>
			</view>
			<!-- 跳转到管理社团 -->
			<view @click="goMangement()">
				<image src="https://img01-xusong.91q.com/1AA212E3-145A-4FB3-9FE6-A02AD9C48A58.png" class="guanliIcon">
				</image>
				<view class="guanliText">管理社团</view>
				<image src="../../static/arrow-right.png" class="guanliRight"></image>
			</view>
			<!-- 跳转到我的收藏 -->
			<view @click="goshoucang()">
				<image src="https://img01-xusong.91q.com/CFCACC59-1537-496E-96B3-9AA2188F2716.png" class="shoucangIcon">
				</image>
				<view class="shoucangText">我的收藏</view>
				<image src="../../static/arrow-right.png" class="shoucangRight"></image>
			</view>
			<view @click="goUserInfo()">
				<image src="https://img01-xusong.91q.com/BF145542-AC12-4307-B4B1-71656A023D26.png" class="xvzhiIcon">
				</image>
				<view class="xvzhiText">用户须知</view>
				<image src="../../static/arrow-right.png" class="xvzhiRight"></image>
			</view>
			<view @click="goToUs()">
				<image src="https://img01-xusong.91q.com/AC224BFB-D2D3-4E91-B74C-FAFC7BC88536.png" class="guanyuIcon">
				</image>
				<view class="guanyuText">关于我们</view>
				<image src="../../static/arrow-right.png" class="guanyuRight"></image>
			</view>
			<view>
				<view class="zhezhao"></view>
				<button open-type="contact" class="kefu" style="border-style:none;"></button>
					<!-- <view class="kefu">
						<button open-type="contact" style="background-color: chocolate;">
							<text>联系客服</text>
						</button></view> -->
					<image src="https://img01-xusong.91q.com/B5EE25D1-795E-4632-BE70-116EC2523B6B.png" class="kefuIcon">
					</image>
					<view class="kefuText">联系客服</view>
					<image src="../../static/arrow-right.png" class="kefuRight"></image>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				// id:this.$store.state.userInfo.id,
				// userName:this.$store.state.userInfo.nickName,
				// avatarUrl:this.$store.state.userInfo.avatarUrl,
				// hasLogin:this.$store.state.hasLogin,
				id: '',
				userName: '未登录',
				avatarUrl: 'https://img01-xusong.91q.com/3A29EDDF-B50B-4B54-9918-83FCFFB4C305.png',
				hasLogin: false,
			}
		},
		methods: {
			goMyPage(e) {
				if (this.$store.state.hasLogin == true) {
					uni.navigateTo({
						url: './member?content=' + JSON.stringify(this.$store.state.userInfo)
					})
				}
			},
			goLogin() {
				if (this.$store.state.hasLogin == false) {
					uni.navigateTo({
						url: './login'
					})
				}
			},
			goToUs() {
				uni.navigateTo({
					url: './about',
				})
			},
			goExamine() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					uni.navigateTo({
						url: "./examine"
					})
				}

			},
			goshoucang() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					uni.navigateTo({
						url: '/pages/index/shoucang',
					});
				}

			},
			gochange() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					uni.navigateTo({
						url: '/pages/index/change',
					});
				}

			},
			gomyshetuan2() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					uni.navigateTo({
						url: '/pages/index/myshetuan2',
					});
				}

			},
			gomyhuodong() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					uni.navigateTo({
						url: '/pages/index/myhuodong',
					});
				}

			},
			goUserInfo() {
				uni.navigateTo({
					url: '/pages/index/userAgreement'
				})
			},
			goMangement() {
				if (!this.$store.state.hasLogin) {
					uni.showModal({
						content: '该功能需要授权登陆之后才能进行使用',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: './login'
								})
							}
						}
					})

				} else {
					let that = this

					uni.request({
						url: 'https://www.codingyt.com/club/userOrganization/select',
						data: {
							userId: that.id,
							role: 'president'
						},
						success(res) {
							let data = []
							var tmpdata = res.data.data
							for (var i = 0; i < tmpdata.length; i++) {
								if (tmpdata[i].role == 'president') {
									data.push(tmpdata[i])
								}
							}
							uni.navigateTo({
								url: '/pages/index/managePeople?content=' + JSON.stringify(data)
							})
						}
					})
				}
			},
			goToMessageMore() {
				uni.navigateTo({
					url: '/pages/index/messageMore'
				})
			},

		},
		onShow() {
			let that = this
			if (this.$store.state.hasLogin == true) {
				that.id = this.$store.state.userInfo.id;
				that.userName = this.$store.state.userInfo.nickName;
				that.avatarUrl = this.$store.state.userInfo.avatarUrl;
				that.hasLogin = this.$store.state.hasLogin;
			}

		}
	}
</script>

<style scoped>
	.allBody {
		background: rgb(255, 255, 255);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 0%);
		height: 1624rpx;
		width: 750rpx;
	}

	.backgroundImg {
		left: 0rpx;
		top: 0rpx;
		width: 750rpx;
		height: 456rpx;
		position: absolute;
	}

	.userImg {
		left: 54rpx;
		top: 152rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 42rpx;
		position: absolute;
	}

	.userName {
		left: 242rpx;
		top: 174rpx;
		width: 400rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.rewriteUserData {
		left: 242rpx;
		top: 250rpx;
		width: 182rpx;
		height: 40rpx;
		color: rgba(136, 136, 136, 100);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		position: absolute;
	}

	.rewriteUserDataIcon {
		left: 428rpx;
		top: 258rpx;
		width: 24rpx;
		height: 24rpx;
		position: absolute;
	}

	.msgIcon {
		left: 582rpx;
		top: 188rpx;
		width: 80rpx;
		height: 80rpx;
		position: absolute;
	}

	.middleBorder {
		left: 42rpx;
		top: 388rpx;
		width: 670rpx;
		height: 142rpx;
		line-height: 40rpx;
		border-radius: 42rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 4rpx 66rpx -26rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.myActIcon {
		left: 84rpx;
		top: 426rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 94rpx;
		position: absolute;
	}

	.myActText {
		left: 170rpx;
		top: 434rpx;
		width: 144rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 600;
	}

	.middleLine {
		left: 374rpx;
		top: 434rpx;
		width: NaNpx;
		height: 50rpx;
		background-color: rgba(187, 187, 187, 100);
		border: 2rpx solid rgba(187, 187, 187, 100);
		position: absolute;
	}

	.myAsoIcon {
		left: 436rpx;
		top: 424rpx;
		width: 68rpx;
		height: 68rpx;
		border-radius: 132rpx;
		position: absolute;
	}

	.myAsoText {
		left: 522rpx;
		top: 434rpx;
		width: 144rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 600;
	}

	.bottomBorder {
		left: 40rpx;
		top: 628rpx;
		width: 668rpx;
		height: 802rpx;
		border-radius: 42rpx;
		background-color: rgba(255, 255, 255, 100);
		box-shadow: 0rpx 4rpx 66rpx -26rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.shenheIcon {
		left: 102rpx;
		top: 660rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shenheText {
		left: 230rpx;
		top: 668rpx;
		width: 480rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}

	.shenheRight {
		left: 622rpx;
		top: 678rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}

	.guanliIcon {
		left: 102rpx;
		top: 794rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.guanliText {
		left: 230rpx;
		top: 802rpx;
		width: 480rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}

	.guanliRight {
		left: 622rpx;
		top: 812rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}

	.shoucangIcon {
		left: 102rpx;
		top: 928rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shoucangText {
		left: 230rpx;
		top: 936rpx;
		width: 480rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}

	.shoucangRight {
		left: 622rpx;
		top: 946rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}

	.xvzhiIcon {
		left: 102rpx;
		top: 1062rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.xvzhiText {
		left: 230rpx;
		top: 1070rpx;
		width: 480rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}

	.xvzhiRight {
		left: 622rpx;
		top: 1080rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}

	.guanyuIcon {
		left: 102rpx;
		top: 1196rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.guanyuText {
		left: 230rpx;
		top: 1204rpx;
		width: 480rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}
	.guanyuRight {
		left: 622rpx;
		top: 1214rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}
	.kefuIcon{
		left: 102rpx;
		top: 1330rpx;
		width: 62rpx;
		height: 62rpx;
		position: absolute;
	}
	.kefuText{
		left: 230rpx;
		top: 1338rpx;
		width: 150rpx;
		height: 52rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 36rpx;
		text-align: left;
		font-family: PingFangSC-medium;
		position: absolute;
		font-weight: 500;
	}
	.kefuRight{
		left: 622rpx;
		top: 1348rpx;
		width: 32rpx;
		height: 32rpx;
		position: absolute;
	}
	.zhezhao{
		left: 40rpx;
		top: 1296rpx;
		width: 668rpx;
		height: 30rpx;
		position: absolute;
		background-color: white;
		z-index: 10;
	}
	.kefu
	{
		left: 38rpx;
		top: 1296rpx;
		width: 672rpx;
		height: 134rpx;
		position: absolute;
		border-radius: 0rpx 0rpx 42rpx 42rpx;
		background-color: #FFFFFF;
	}
	.line1 {
		left: 40rpx;
		top: 758rpx;
		width: 666rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 0.2);
		background-color: rgba(187, 187, 187, 0.2);
		position: absolute;
	}

	.line2 {
		left: 40rpx;
		top: 894rpx;
		width: 666rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 0.2);
		background-color: rgba(187, 187, 187, 0.2);
		position: absolute;
	}

	.line3 {
		left: 40rpx;
		top: 1028rpx;
		width: 666rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 0.2);
		background-color: rgba(187, 187, 187, 0.2);
		position: absolute;
	}

	.line4 {
		left: 40rpx;
		top: 1158rpx;
		width: 666rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 0.2);
		background-color: rgba(187, 187, 187, 0.2);
		position: absolute;
	}
	.line5{
		left: 40rpx;
		top: 1296rpx;
		width: 666rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 0.2);
		background-color: rgba(187, 187, 187, 0.2);
		position: absolute;
		z-index: 20;
	}

	/* #box {}

	#box_font {
		position: absolute;
		width: 100%;
		height: 40%;
		background-image: url(../../static/backgroundimg.jpg);
		background-position: 50%;
		float: left;


	}

	.photo {
		position: relative;
		left: 7%;
		top: 13%;
		overflow: hidden;

		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;

		border: 0rpx solid #fff;

		box-shadow: 6rpx 6rpx 20rpx rgba(0, 0, 0, 0.2);
	}

	.name {
		margin-left: 25%;
		font-size: 25rpx;
		position: relative;
		top: 3%;
		font-weight: bold;
		color: white;
	}

	#box_bottom {
		position: absolute;
		top: 34%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		width: 100%;
		height: 66%;
		background-color: white;
	}

	.bottom-font {
		width: 100%;
		height: 20%;

	}

	.bottom-bottom {
		width: 100%;
		height: 75%;

	}

	.bottom-left {
		float: left;
		margin-left: 22%;
		width: 150rpx;
		height: 150rpx;
		margin-top: 15rpx;
	}

	.bottom-right {
		float: left;
		margin-left: 18%;
		margin-right: 20%;
		width: 150rpx;
		height: 150rpx;
		margin-top: 15rpx;
	} */
</style>
